<!--
 * @Description:
 * @Author: zhangweigang
 * @Date: 2021-03-20 21:46:24
 * @LastEditTime: 2021-05-05 10:29:39
 * @LastEditors: zhangweigang
-->
<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome' }"><span class="tW">首页</span></el-breadcrumb-item>
      <el-breadcrumb-item><span class="tW">公告管理</span></el-breadcrumb-item>
      <el-breadcrumb-item><span class="tW">公告列表</span></el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card class="box-card">
      <!-- 搜索区域  :gutter 指定格与格的距离-->
      <el-row :gutter="20">
        <!--  :span 指定宽度 -->
        <el-col :span="8">
          <el-input placeholder="请输入内容" v-model="queryTitle" clearable @clear="doClick">
            <el-button slot="append" @click="toClick" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
      </el-row>
      <!-- 列表区域 -->
      <el-table :data="noticeList" stripe border>
        <el-table-column prop="noticeTitle" label="公告标题" header-align="center"></el-table-column>
        <el-table-column label="内容" header-align="center">
          <template slot-scope="scope">
            <div class="content_notice">{{ scope.row.noticeContent }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="creator" label="管理者" header-align="center"></el-table-column>
        <el-table-column prop="createDate" label="发布时间" header-align="center"> </el-table-column>
        <el-table-column label="操作" header-align="center">
          <template slot-scope="scope">
            <!-- 修改按钮  -->
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.id)">修改</el-button>
            <!-- 删除按钮  -->
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeNoticeById(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页添加 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[10, 20, 30, 40, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
        <!-- layout 指定功能组件 -->
      </el-pagination>
      <!-- 修改公告 对话框 -->
      <el-dialog title="修改公告信息" :visible.sync="editDialogVisible" width="50%" @close="editDialogClosed">
        <el-form :model="noticeFrom" :rules="noticeFromRules" ref="noticeFromRef" label-width="120px">
          <el-form-item label="公告标题" prop="noticeTitle">
            <el-input v-model="noticeFrom.noticeTitle"></el-input>
          </el-form-item>
          <el-form-item label="内容" prop="noticeContent">
            <el-input type="textarea" v-model="noticeFrom.noticeContent" rows="20"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="editNoticeInfo">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
import bookShareManagerInfoAipService from '@/network/aipBookShareService.js'
export default {
  data() {
    return {
      // 保存用户列表数据
      noticeList: [],
      total: 0,
      // 默认分页参数
      pageNum: 1, // 当前页数
      pageSize: 10, // 每页显示多少条数据
      queryTitle: '', // 搜索关键字
      // 修改公告表单数据
      noticeFrom: { noticeTitle: '', noticeContent: '' },
      noticeFromRules: {
        noticeTitle: [
          {
            required: true,
            message: '请输入标题',
            trigger: 'blur'
          }
        ],
        noticeContent: [
          {
            required: true,
            message: '请输入公告内容',
            trigger: 'blur'
          }
        ]
      },
      // 修改用户对话框的 显示与隐藏
      editDialogVisible: false,
      // 保存 根据id查询的 用户信息
      editForm: {},
      // 当前用户信息
      userInfo: {},
      // 记录更新Id
      updataId: 0
    }
  },
  created() {
    // 当页面被创建出来，获取公告列表数据
    this.getNoticeList()
    // 公告分页查询
    this.getPageData(this.pageNum, this.pageSize)
  },
  methods: {
    toClick() {
      this.getTitleQueryData(this.queryTitle)
    },
    doClick() {
      this.getNoticeList()
      // 公告分页查询
      this.getPageData(this.pageNum, this.pageSize)
    },
    // 根据标题查询
    getTitleQueryData(keys) {
      bookShareManagerInfoAipService.accordToTitleQuery(keys).then(res => {
        if (res.data.code === 0) {
          // 获取总数
          this.total = res.data.total
          this.noticeList = res.data.rows
        } else {
          this.$message({
            showClose: true,
            message: '数据获取失败，请联系管理员！',
            type: 'error',
            duration: 4000
          })
        }
      })
    },
    // 获取列表
    getNoticeList() {
      bookShareManagerInfoAipService.getNoticeListDataInfo().then(res => {
        if (res.data.code === 0 && res.status === 200) {
          // 获取总数
          this.total = res.data.total
        } else {
          this.$message({
            showClose: true,
            message: '数据获取失败，请联系管理员！',
            type: 'error',
            duration: 4000
          })
        }
      })
    },
    /**
     * 获取公告分页数据
     * @pageNum 当前页数
     * @pageSize 每页显示多少条数据
     */
    getPageData(pageNum, pageSize) {
      bookShareManagerInfoAipService.getAnnouncePagination(pageNum, pageSize).then(res => {
        if (res.data.code === 0) {
          // 获取留言列表
          this.noticeList = res.data.rows
        } else {
          this.$message({
            showClose: true,
            message: '分页数据获取失败，请联系管理员！',
            type: 'error',
            duration: 4000
          })
          return
        }
      })
    },
    // 监听 pagesize 改变事件
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.getPageData(this.pageNum, pageSize)
    },
    // 监听 页码值 改变事件
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum
      this.getPageData(pageNum, this.pageSize)
    },
    // 修改公告
    showEditDialog(id) {
      // 根据 id 查询该条公告
      bookShareManagerInfoAipService.getNoticeByIdContent(id).then(res => {
        const data = res.data
        if (data.code === 0 && res.status) {
          // 取出标题和内容
          this.noticeFrom.noticeTitle = data.data.noticeTitle
          this.noticeFrom.noticeContent = data.data.noticeContent
          this.updataId = id
        } else {
          return this.$message.error('数据信息失败，请联系管理员！')
        }
      })
      this.editDialogVisible = true
    },
    // 修改表单 重置操作
    editDialogClosed() {
      this.$refs.noticeFromRef.resetFields()
    },
    // 编辑公告信息
    editNoticeInfo() {
      this.$refs.noticeFromRef.validate(valid => {
        if (!valid) return
        let params = {
          ...this.noticeFrom,
          delFlag: 1,
          id: this.updataId,
          noticeType: 2,
          status: 0,
          creator: localStorage.getItem('adminname')
        }
        bookShareManagerInfoAipService.updataNoticeByID(params).then(res => {
          if (res.data.code === 0 && res.status) {
            this.$message.success('恭喜您，修改成功！')
            // 刷新列表
            this.getPageData(this.pageNum, this.pageSize)
            // 更新成功后 关闭对话框
            this.editDialogVisible = false
            return
          } else {
            return this.$message.success('抱歉，修改失败！')
          }
        })
      })
    },
    // 删除公告
    async removeNoticeById(id) {
      const confirmResult = await this.$confirm('此操作将永久删除该公告, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      console.log(confirmResult, 'confirmResult')
      // 如果点击确定 返回为 confirm，点击取消 返回为 cancel
      if (confirmResult !== 'confirm') {
        return this.$message.info('已经取消删除操作！')
      }
      // 发送请求 删除用户
      bookShareManagerInfoAipService.deleteNoticeById(id).then(res => {
        if (res.data.code === 0 && res.data.data) {
          this.$message.success('删除公告成功！')
          this.getNoticeList()
          // 刷新列表
          this.getPageData(this.pageNum, this.pageSize)
        } else {
          this.$message.error('删除公告失败！')
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.el-card {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
}
.el-table,
.el-pagination {
  margin-top: 15px;
}
.content_notice {
  width: 100%;
  height: 65px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
</style>
